import React, { useEffect, useImperativeHandle, useState } from 'react';
import { Button, Modal, Form, Input, Radio, Select,DatePicker } from 'antd';

const { Option } = Select;

const optiops = [
  {
    lable: 'haha',
    value: 1,
  },
  {
    lable: 'xixi',
    value: 2,
  },
];

const UserModal = (
  props: any,
  ref:
    | ((instance: unknown) => void)
    | React.RefObject<unknown>
    | null
    | undefined,
) => {
  // const { cRef,onOk, loading } = props
  const { onOk, loading } = props;
  // 表单
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [title, setTitile] = useState('添加用户');
  const [record, setRecord] = useState({ id: '' });

  // 提交
  const onSubmit = () => {
    form
      .validateFields()
      .then((values) => {
        console.log(values);
        const { username, role } = values;
        onOk({ username, role }, record.id);
      })
      .catch(() => {});
  };

  // 取消
  const onCancel = () => {
    setVisible(false);
    form.resetFields();
  };
  const onShowModal = (record?: any) => {
    if (record) {
      // 设置表单值
      form.setFieldsValue({
        role: record.role,
        username: record.name,
      });
      setRecord(record);
      setTitile('编辑用户');
    } else {
      setRecord({ id: '' });
      setTitile('添加用户');
    }
    setVisible(true);
  };
  // 暴露给父元素的方法
  // useImperativeHandle(cRef, () => ({onShowModal,onCancel}))
  useImperativeHandle(ref, () => ({ onShowModal, onCancel }));
  // 布局
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };

  const [showList, setShowList] = useState(false);

  const setValue = (item) => {
    alert('2');
    form.setFieldsValue({
      test: item,
    });
  };

  const list = () => {
    return (
      <ul>
        <li onClick={() => setValue('222')}>222</li>
        <li onClick={() => setValue('3333')}>3333</li>
      </ul>
    );
  };

  return (
    <Modal
      {...layout}
      width={400}
      centered={true}
      title={title}
      visible={visible}
      maskClosable={false}
      confirmLoading={loading}
      onCancel={onCancel}
      onOk={onSubmit}
    >
      <Form {...layout} name={'form'} size={'middle'} form={form}>
      <Form.Item
          label="测试中英文"
          name="datePicker"
        >
         <DatePicker></DatePicker>
        </Form.Item>
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input size='large' placeholder="请输入用户名"></Input>
        </Form.Item>
        <Form.Item
          label="用户类型"
          name="role"
          rules={[{ required: true, message: '请选择用户类型' }]}
          initialValue={'user'}
        >
          <Radio.Group>
            <Radio value="admin">管理员</Radio>
            <Radio value="user">普通用户</Radio>
            <Radio value="guest">游客</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          label="用户角色"
          name="roles"
          rules={[{ required: true, message: '请选择用户类型' }]}
          initialValue={'user'}
        >
          <Select style={{ width: 120 }}>
            {optiops.map((item, index) => (
              <Option key={index}>{item.value}</Option>
            ))}
          </Select>
        </Form.Item>
        <div>
          <Form.Item
            label="选择"
            // name="test"
            // rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Form.Item
              // label="选择"
              name="test"
              noStyle
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input style={{ width: 120 }} placeholder="请输入"></Input>
            </Form.Item>
            <Button onClick={() => setShowList(!showList)}>确定</Button>
          </Form.Item>
          <div>{showList ? list() : ''}</div>
        </div>
      </Form>
    </Modal>
  );
};

// export default UserModal
export default React.forwardRef(UserModal);

// 笔记
// 当父组件调用子组件的方法时，可采用两种方式
// 1 父组件通过props传递的方式，自定义名往下传递
// 2 父组件通过ref的方式，但子组件导出时需要被React.forwardRef包裹，否则无法接收 ref这个参数
// 3 可在userimperativeHandle中直接定义方法，但考虑到代码整洁，可放在外部，这样只需返回一个显式的对象
